<script setup lang="ts">

const emit = defineEmits(['addItem'])

const addItem =()=>{
    emit('addItem')
}

</script>
<template>
    <div class="box" @click="addItem">
        <div class="icon"><el-icon size="50"><Plus /></el-icon></div>
    </div>
</template>
<style scoped>
.box
{
    box-sizing: border-box;
    display: flex; /* 设置为flex容器 */
    justify-content: center; /* 主轴对齐方式为居中 */
    align-items: center; /* 交叉轴对齐方式为居中 */
    height: 80px;
    width: 80px;
    background-color: rgba(102, 102, 102, 0.396);
    border-radius: 10px;
    box-shadow: 3px 3px 10px rgba(10, 10, 10, 0.747);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s;
}
.box:hover
{
    background-color: rgba(155, 155, 155, 0.396);
}
.box .icon
{
    color: rgb(158, 158, 158);
    transition: all 0.2s;   
    text-align: center;
}
.box:hover>.icon
{
    color: white;
}
</style>